<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.keyword" placeholder="题型" style="width:200px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="search" icon="el-icon-search" style="margin-left: 15px;">查询
                    </el-button>
                </el-form-item>

                <el-form-item style="float:right;">
                    <el-button type="primary" @click="showAdd" icon="el-icon-circle-plus-outline">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="dataList" border highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                  style="width: 100%;">
            <el-table-column type="index" width="125">
            </el-table-column>
            <el-table-column prop="name" label="题型" width="420">
            </el-table-column>
            <el-table-column label="操作" width="450">
                <template slot-scope="scope">
                    <el-button size="mini" @click="showEdit(scope.$index, scope.row)" icon="el-icon-edit">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDel(scope.$index, scope.row)"
                               icon="el-icon-delete">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="total, sizes, prev, pager, next, jumper"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :page-sizes="pageSizes"
                           :page-size="pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--新增/编辑共用界面-->
        <el-dialog :title="formTitle" :visible.sync="formVisible" :close-on-click-modal="false">
            <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
                <el-form-item label="题型" prop="name">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="formVisible = false">取消</el-button>
                <el-button type="primary" @click.native="saveSubmit" :loading="submitLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--<el-dialog></el-dialog>-->
    </section>
</template>

<script>
    export default {
        data() {
            return {
                filters: {
                    keyword: ''
                },


                listLoading: false, //是否显示加载动画
                submitLoading: false,

                dataList: [], //数据列表(用户)

                total: 0,
                pageIndex: 1, //页码
                pageSize: this.CONSTANT.PAGE_SIZE, //分页大小
                pageSizes: this.CONSTANT.PAGE_SIZES, //分页大小选择列表

                sels: [],//列表选中列

                action: '', // 'add'-添加，'edit'-编辑，'detail'-详情
                formVisible: false, //界面是否显示
                formTitle: '', //界面标题
                formRules: {
                    name: [
                        {required: true, message: '请输入内容', trigger: 'blur'}
                    ],
                },

                //新增/编辑界面数据
                formData: {
                    name: '',
                },
            }
        },
        methods: {
            handleReset() {
                this.filters.keyword = "";
            },
            handleSizeChange(val) { //改变分页大小
                this.pageSize = val;
                this.getDataList();
            },
            handleCurrentChange(val) { //页码跳转
                this.pageIndex = val;
                this.getDataList();
            },
            search() {
                this.getDataList();
            },
            getDataList() { //获取数据列表（用户）

                this.listLoading = true;

                let para = {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    keyword: this.filters.keyword,
                };

                this.$http.post('/api/exercisetype/findByCondition ', para).then(res => {

                    this.listLoading = false;

                    this.total = res.data.total;
                    this.dataList = res.data.data;

                }).catch((error) => {
                    this.listLoading = false;
                    if (error) console.log(error);
                });
            },
            //handleDel: function (index, row) { //删除
                  //this.$confirm('确认删除该记录吗?', '提示', {
                    //type: 'warning'
                //}).then(() => {
                  //  let para = {id: row.id};
                    //this.$http.get('/api/删除' + para.id).then((res) => {

                        //if (res.data.code == 0) {
                            //this.$message({
                                //message: '删除成功',
                                //type: 'success'
                           // });
                        //} else {
                            //this.$message({
                                //message: '删除失败',
                               // type: 'error'
                            //});
                        //}
                       // this.getDataList();
                   // });
                //}).catch(() => {
                    //if (error) console.log(error);
                //});
            //},
            showAdd: function () { //显示新增界面
                this.formVisible = true;
                this.formData = {
                    name: '',
                };
                this.action = "add";
                this.formTitle = '新增';
            },
            showEdit: function (index, row) { //显示编辑界面

                this.formVisible = true;
                this.formData = Object.assign({}, row);

                this.action = "edit";
                this.formTitle = '编辑';
            },
            saveSubmit: function () { //保存：新增/编辑
                let apiPath = '';
                if (this.action == 'add') {
                    apiPath = '/api/exercisetype/add ';
                } else {
                    apiPath = '/api/exercisetype/modify ';
                }

                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    this.submitLoading = true;

                    let  para= {
                        name: this.formData.name,
                    };
                    console.log(para);

                    this.$http.post(apiPath, para).then(res => {
                        this.submitLoading = false;

                       if (res.data.code == 0) {
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                             });
                             this.$refs['formData'].resetFields();
                             this.formVisible = false;
                             this.getDataList(); //重新加载数据
                         } else {
                            this.$message({
                                message: res.data.msg,
                                 type: 'error'
                            });
                         }
                     }).catch((error) => {
                         this.submitLoading = false;
                         if (error) console.log(error);
                     });
                });
            },
        },
        mounted() {
            this.getDataList(); //进入页面就加载数据
            // switch (this.)
        }
    }

</script>

<style scoped>

</style>